<template>
    <div class="container">
        
        <!-- 导航条 -->
        <van-nav-bar fixed title="收货地址" :left-arrow="true" :placeholder="true" @click-left="$router.back()" />

        <!-- 地址列表 -->
        <div class="address-list">

        </div>


        <!-- 添加新的收货地址 -->
        <div class="bottom-view" >
            <div class="bottom-view-add" @click="addNewAddress">添加新地址</div>
        </div>


    </div>
</template>

<script>

import { getAddressList } from '@/api'

export default {
    name: 'leeAddress',
    data(){
        return {
            list:[]
        }
    },
    created(){
        this.getAddress
    },
    methods:{

      async getAddress(){
        const resp = await getAddressList()
        console.log('------------')
        console.log(resp)
      },
      addNewAddress(){ 
        this.$router.push('/addAddress')
      }
    }

}
</script>

<style lang="less" scoped>

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #eee;

    address-list {

        row-gap: 10px;

        margin: 0px 10px;
        background-color: #fff;
        height: 120px;


    }


    .bottom-view {
        position: fixed;
        left: 0px;
        bottom: 0px;
        right: 0px;
        height: 60px;
        background-color: #fff; 
        padding: 10px 30px;

        .bottom-view-add {
            font-size: 15px;
            color: #fff; 
            height: 40px;
            line-height: 40px;
            background: linear-gradient(to right, red, orange);
            text-align: center;
            border-radius: 40px;
        }


    }
}

</style>